<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">销售客户信息</span>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addRow()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-show="tableData.length === 0 && canEdit && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加销售客户信息</span>
      </el-button>
      <el-button type="primary"
                 @click="addRow()"
                 style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                 v-show="editable && canEdit && !showForm && tableData.length > 0" round>
        <i class="joys-icon-addagain" style="margin-right: 18px;"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
      </el-button>
      <span v-if="tableData.length === 0 && !editable">没有数据</span>

    </el-row>

    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="formData"
               :rules="rules"
               :class="{cardBackColor:!canEdit}"
               style="text-align: left;padding-top: 28px"
               v-if="showForm" inline>
        <el-row style="padding:0px 12px 24px 12px">
          <el-col :md="8" :lg="6">
            <el-form-item label="销售客户" prop="seller">
              <ft-input :editable="!canEdit" v-model="formData.seller" class="input" ></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="关系年限" prop="relationYears">
              <ft-number-input :editable="!canEdit"
                               v-model="formData.relationYears"
                               :precision='[2]'>
              </ft-number-input>
            </el-form-item>
          </el-col>

          <el-col :md="8" :lg="6">
            <el-form-item label="销售产品种类" prop="productType">
              <ft-input :editable="!canEdit" v-model="formData.productType" class="input"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="年销售额(万元)" prop="amount">
              <ft-number-input :editable="!canEdit"
                               v-model="formData.amount"
                               :precision='[16,2]'>
              </ft-number-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="占整体销售比例" prop="proportion">
              <ft-number-input v-model="formData.proportion"
                               :editable="!canEdit"
                               :precision='[10,6]'
                               :percent="true">
              </ft-number-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="收款期限" prop="marketTime">
              <ft-input :editable="!canEdit" v-model="formData.marketTime" class="input"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="收款方式" prop="marketMethod">
              <ft-input :editable="!canEdit" v-model="formData.marketMethod"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="24" :lg="24">
            <el-form-item label="备注" prop="remark">
              <ft-input type="textarea"
                        style="display: inline"
                        class="input"
                        :editable="!canEdit"
                        :autosize='{ minRows: 1, maxRows: 5}'
                        v-model="formData.remark">
              </ft-input>
            </el-form-item>
          </el-col>
        </el-row>

        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

        <el-row style="padding:16px 0px">
          <el-col v-if="!canEdit" align="right" >
            <el-button size="mini"
                       @click="handleCancel(formData)">取消
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleSave(formData)"
                       :disabled="canSave"
                       style="margin-left: 24px;margin-right: 36px">保存
            </el-button>
          </el-col>
          <el-col v-else align="right">
            <el-button size="mini"
                       @click="handleCancel(formData)">返回
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>

    <transition name="el-zoom-in-top">
      <el-table :data="tableData"
                v-show="tableData.length > 0 && !showForm"
                tooltip-effect="light"
                class="tableClass">
        <el-table-column label="销售客户" prop="seller" align="left">
          <template slot-scope="scope">
            <ft-link-text @click="detailForm(scope.row)"
                          :text="scope.row.seller">
            </ft-link-text>
          </template>
        </el-table-column>
        <el-table-column label="关系年限" prop="relationYears" align="left"></el-table-column>
        <el-table-column label="销售产品种类" prop="productType" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column label="年销售额(万元)" prop="amount" align="right">
          <template slot-scope="scope">
            <ft-number-input :editable="false" v-model="scope.row.amount"></ft-number-input>
          </template>
        </el-table-column>
        <el-table-column label="占整体销售比例" prop="proportion" align="left">
          <template slot-scope="scope">
            <ft-number-input :editable="false" :precision='[10,6]'
                             v-model="scope.row.proportion"
                             :percent="true">
            </ft-number-input>
          </template>
        </el-table-column>
        <el-table-column label="收款期限" prop="marketTime" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column v-if="editable" label="操作" min-width="120" align="center">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       @click="handleEdit(scope.$index,scope.row)">编辑
            </el-button>
            <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
              <p>数据删除后，将不能恢复，确认删除？</p>
              <div style="text-align:right; margin:0">
                <el-button size="small"
                           @click="scope.row.delVisible=false">取消
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index, tableData)">确定</el-button>
              </div>
              <span slot="reference" style="margin-left:.10rem">
                  <el-button type="text" size="small" style="color:#B94A48">删除
                  </el-button>
                </span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </transition>
  </div>
</template>

<script>

  export default {
    name: "SalesChannels",
    props: {
      customerId: {
        type : String,
        default : '',
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    mounted() {
      this.load()
    },
    data() {
      let validateShareScale = (rule, value, callback) => {
        if (value > 1 || value < 0) {
          callback(new Error("请输入正确的比例"))
        } else {
          return callback()
        }
      };
      let yearsValidate =(rule,value,callback)=>{
        let regular = /^[+]{0,1}(\d+)$/
        if (value && !regular.test(value)) {
          callback(new Error('输入正确的年限'));
        } else {
          callback();
        }
      }
      return {
        condition: [],
        tableEnumEdit: false,
        dataVersion: "",
        tableData: [],
        marketType: "sales",
        formData: {},
        formBack: {},
        dataIndex: 0,
        showForm: {
          type: Boolean,
          default: false
        },
        canEdit: true,
        canSave: false,
        rules: {
          seller: [
            {required: true, message: '销售客户不能为空',trigger: 'blur'},
            {max: 80, message: '长度在 0 到 80 个字符', trigger: 'blur'}],
          relationYears: [{
            required: true,message: '关系年限不能为空',trigger: 'blur'},
            {validator:yearsValidate,trigger:'blur'}],
          productType: [{
            required: true,message: '销售产品种类不能为空',trigger: 'blur'},
            {max: 80, message: '长度在 0 到 80 个字符', trigger: 'blur'}],
          amount: [{
            required: true, message: '销售额不能为空',trigger: 'blur'}],
          proportion: [{
            required: true,message: '销售比例不能为空',trigger: 'blur'},
            {validator: validateShareScale, trigger: 'blur'}],
          marketTime: [{
            required: true,message: '收款期限不能为空',trigger: 'blur'},
            {max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur'}],
          marketMethod: [{
            required: true,message: '收款方式不能为空',trigger: 'blur'},
            {min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur'}],
          remark: [
            { max: 1000, message: '备注信息需在1000字以内', trigger: 'blur'}]
        }
      }
    },

    methods: {
      load() {
        this.$http.get('/joys-rest/lss-customer/market/', {
          params: {
            customerId: this.customerId,
            marketType: this.marketType
          }
        }).then(resp => {
          this.tableData = resp.body;
          this.showForm = false
        }, resp => {
          this.$message.error(resp.body)
        })
      },
      //展示详细信息
      detailForm(val){
        this.formData=val
        this.showForm=true
        this.canEdit=true
      },
      //列表编辑按钮
      handleEdit(index, row) {
        this.formBack = JSON.parse(JSON.stringify(row));
        this.formData = JSON.parse(JSON.stringify(row));
        this.canEdit = false;
        this.showForm = true
      },
      //列表删除按钮
      handleDelete(index, row) {
        this.marketInfoId = row[index].marketInfoId;
        this.$http.delete('/joys-rest/lss-customer/market/' + this.marketInfoId).then(
          resp => {
            row.splice(index, 1);
            this.$message.success('删除成功!')
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //列表取消
      handleCancel() {
        this.formData = this.formBack;
        this.showForm = false;
        this.canEdit = true
      },
      //列表增行
      addRow() {
        this.formData = {
          customerId: this.customerId,
        };
        this.index = -1;
        this.canEdit = false;
        this.showForm = true
      },
      //保存
      handleSave() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.formData.marketType = this.marketType;
            this.$http.put('/joys-rest/lss-customer/market/', this.formData).then(
              resp => {
                this.load();
                this.canEdit = true;
                this.showForm = false;
                this.$message.success('保存成功!')
              },
              resp => {
                this.$message.error(resp.body);
                this.canEdit = false
              })
          }
          else {
            return false;
          }
        })
      },
      //字数较多时，超出部分用...显示
      convertInputValue(val){
        if(null != val && '' != val && val.length >9){
          return val.substr(0,9)+'...'
        }
        return val
      }
    }
  }
</script>

<style scoped>
  .input{
    overflow: auto;
    white-space: normal;
    word-wrap: break-word;
  }
</style>
